<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Feedback ${threads.threadsName }</title>
<style>
	.threads{
		border:1px solid grey;
		margin:10px 0; 
		padding:10px;
	}
	.replys>.media-list>.media{
		border:1px solid grey;
		padding:10px;
	}
</style>
</head>

<body>
	<%@ include file="heading.jsp"%>
	
	<div class="container">
		<div class="row">

			<div class="col-sm-9">
				<div class="threads">
					<div class="media">
						<div class="media-left">
							<a href="#"> <img class="media-object"
								src="images/example.png" alt="...">
							</a>
						</div>
						<div class="media-body">
							<h3 class="media-heading">${threads.threadsName }</h3>
							<div class="clearfix visible-sm"></div>
							<div class="media-content">
<%-- 								<p>username:${user.username}</p>
								<p>userType:${user.userType}</p>
								<p>status:${user.status}</p> --%>
								<p>${threads.pubTime }&nbsp; ${threads.unm }</p>
								<p>${threads.threadsContent }</p>

								<a class="btn btn-default" href="#">REPLY</a>
							</div>
						</div>
					</div>
				</div>
				<div class="clearfix visible-lg"></div>
				<hr/>
				<!-- replys begin -->
				<div class="replys">
					<c:choose>
						<c:when test="${!empty replys}">
							<ul class="media-list">
								<c:forEach items="${replys}" var="reply" varStatus="status">
									<li class="media">
										<div class="media-left">
											<a href="#"> <img class="media-object"
												src="images/example.png" alt="...">
											</a>
										</div>
										<div class="media-body">
											<h3 class="media-heading"></h3>
											<div class="clearfix visible-xs"></div>
											<p>THE_NO.${status.count}_FLOOR</p>
											<p>${reply.reply_time}&nbsp; ${reply.unm}</p>
											<p>${reply.reply_content }</p>

											<div class="clearfix visible-xs"></div>
											<!-- comment begin -->
											<%-- 											<c:forEach items="${commentForReply}" var="comment">
											<div class="media">
												<div class="media-left">
													<a href="#">
														<img class="media-object" src="images/example.png" alt="...">
													</a>
												</div>
												<div class="media-body">
													<h3 class="media-heading"></h3>
													<p>${comment.commet_time} &nbsp; ${comment.uID }</p>
													<p>${comment.comment_content }</p>												</h3>
												</div>
											</div>								
											</c:forEach> --%>
										</div>
									</li>
								</c:forEach>
							</ul>
						</c:when>
						<c:otherwise>
							<p>no reply in this threads yet!</p>
						</c:otherwise>
					</c:choose>
				</div>
				
				<hr/>
				
				<div style="margin:20px;">
					<h3>publish my reply</h3>
					<form>
						<input type="hidden" name="uID" value="1" />			
						<input type="hidden" name="replyID" value="" /> 
						<input type="hidden"
							name="threads_ID" value="${threads.threadsID }" />
						<textarea id="myReply" class="form-control" name="reply_content" cols="20" rows="5">......</textarea>
						<input type="button" class="btn btn-default" value="submit" />
						<input type="reset" class="btn btn-default" value="reset" />
					</form>
				</div>
			</div>

			<div class="col-sm-3">
				<div class="well">Hot Threads</div>
				<div id="hotThreads" class="list-group"></div>
			</div>

		</div>
	</div>

<%@include file="footer.jsp" %>

	<script type="text/javascript" src="js/threadsDetail.js"></script>
</body>
</html>
